<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <c-select
          clearable
          v-model="params['gua_type.eq']"
          @change="getData()"
          :options="enumGuaType"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <c-select
          clearable
          v-model="params['channel_type.eq']"
          @change="getData()"
          :options="{
            1: '便捷（增量）',
            0: '常规（存量）',
          }"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <c-select
          v-model="params['is_history.eq']"
          clearable
          placeholder="历史数据或新增项目"
          :options="{
            0: '新增项目',
            1: '历史数据',
          }"
          @change="getData()"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <c-select
          v-model="seachParams"
          clearable
          placeholder="项目状态"
          :options="searchOptions"
          @change="setSeachParams"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="card my-2">
      <div class="card-body" v-loading="countLoading">
        <span class="h5 text-muted">
          项目共计：
          <span class="text-danger">{{ tableCount }}</span>
        </span>
        <span class="h5 text-muted ml-5">
          放款金额合计：
          <span class="text-danger">{{ tableFunds || '-' }}</span>
          万元
        </span>
      </div>
    </div>

    <c-table
      border
      class="table-sm"
      v-loading="loading"
      :columns="tableColumns"
      :data="tableData"
    ></c-table>
  </div>
</template>

<script>
import { searchOptions } from '../CreditCount'
export default {
  components: {},
  data() {
    return {
      searchOptions,
      enumGuaType: {
        4: '省联担',
        2: '直担',
        3: '限率',
      },
      loading: false,
      tableData: [],
      tableColumns: [
        { attrs: { label: '机构名称', prop: 'service_name' } },
        { attrs: { label: '项目数', prop: 'p' } },
        { attrs: { label: '放款金额', prop: 'p1' } },
        { attrs: { label: '申请金额', prop: 'p2' } },
        { attrs: { label: '在保余额', prop: 'p3' } },
      ],
      params: {
        groupFields: 'service_id',
        fields: ['service_name', 'service_id'],
        groupFunc:
          'count(customer_related.service_id),round(sum(reply_funds)),round(sum(apply_funds)),round(sum(left_funds))',
        create_time: '',
        'gua_type.eq': '4',
        'channel_type.eq': '0',
        'is_history.eq': '0',
      },
      serviceName: '',
      seachParams: 'loan_approval_status=3',

      tableCount: 0,
      tableFunds: 0,
      countLoading: false,
    }
  },

  created() {
    this.setSeachParams(this.seachParams)
  },
  methods: {
    getCountData() {
      this.countLoading = true
      this.$api
        .getData('credit', 'customer_related', { ...this.params, groupFields: '' })
        .then(res => {
          const data = res?.data?.[0] ?? {}
          this.tableCount = data.p || 0
          this.tableFunds = data.p1 || 0
        })
        .finally(() => {
          this.countLoading = false
        })
    },
    setSeachParams(a) {
      const data = this.searchOptions.find(item => item.value === a) || {}
      const params = data.params || {}
      this.params = {
        ...params,
        'channel_type.eq': this.params['channel_type.eq'],
        'is_history.eq': this.params['is_history.eq'],
        groupFunc: this.params.groupFunc,
        fields: this.params.fields,
        groupFields: this.params.groupFields,
        'gua_type.eq': this.params['gua_type.eq'],
      }
      this.getData()
      this.getCountData()
    },
    getData() {
      this.loading = true
      this.$api
        .getData('credit', 'customer_related', this.params, { service_name: 'desc' })
        .then(res => {
          this.tableData = res.data || []
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>
<style lang="scss" scoped></style>
